<template>
  <div>
    <ElForm inline ref="form" :model="queryCondition">
      <ElFormItem label="供货商" prop="supplierLike">
        <ElInput v-model="queryCondition.supplierLike"></ElInput>
      </ElFormItem>
      <ElFormItem label="单据状态" prop="billState">
        <ElSelect v-model="queryCondition.billState" @change="stateChange">
          <template v-for="(e, i) in billStates" :key="i">
            <ElOption :label="e.label" :value="e.value"></ElOption>
          </template>
        </ElSelect>
      </ElFormItem>
      <ElFormItem>
        <ElButton icon="Remove" @click="reset()"></ElButton>
        <ElButton icon="Search" type="primary" @click="queryByCondition(1)"></ElButton>
      </ElFormItem>
    </ElForm>

    <ElTable ref="table" :data="results" @selection-change="(rows:any) => selected=rows">
      <ElTableColumn type="selection" width="64" />
      <ElTableColumn prop="billId" label="采购单编号"></ElTableColumn>
      <ElTableColumn label="单据状态">
        <template #default="{ row }">
          <template v-for="(e, i) in billStates" :key="i">
            <ElTag v-if="e.value === row.billState" :type="e.color">{{ e.label }}</ElTag>
          </template>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="supplier" label="供货商"></ElTableColumn>
      <ElTableColumn label="付款金额">
        <template #default="{ row }">
          <div style="width: 64px; text-align: right">{{ row.amount.toFixed(2) }}</div>
        </template>
      </ElTableColumn>
      <ElTableColumn label="交货日期">
        <template #default="{ row }">
          <!-- 2021-02-20T12:00:00 -->
          <span>{{ row.receiveDate && row.receiveDate.split('T')[0] }}</span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="审核" :align="'center'" fixed="right" width="160px">
        <template #default="{ row }">
          <ElButton size="small" type="primary" icon="Finished" @click="open4Audit(row)">
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
    <PurchaseAudit ref="audit" @post-audit="queryByCondition"></PurchaseAudit>
  </div>
</template>
<script lang="ts">
import { PurchaseBill, billStates } from '@/entity/purchase.entity'

/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default defineComponent({
  name: 'PurchaseAuditor',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      billStates,
      sampleD: 'value',
      queryCondition: {
        supplierLike: '',
        billState: 'toAudit',
        pageNum: 1,
        pageSize: 3
      },
      total: 0,
      results: [] as Array<PurchaseBill>,
      selected: [] as Array<PurchaseBill>
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition();
  },
  methods: {
    // sampleM() {},
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      const res = await axios({
        method: 'post',
        url: '/purchase/query/auditor',
        data: this.queryCondition
      })
      this.total = res.data.total
      this.results = res.data.results
    },
    async open4Audit(row: PurchaseBill) {
      const res = await axios({
        method: 'get',
        url: '/purchase/find/' + row.billId
      })
      const audit: any = this.$refs.audit
      audit.show(res.data)
    },
    stateChange() {
      this.queryByCondition(1)
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
